<!--
 * @FileDescription:
 * @Author: 茆生涛
 * @Date: 2021-07-26 17:22:19
 * @LastEditors: mst
 * @LastEditTime: 2021-10-27 17:58:54
-->
<template>
  <div class="home">
    <div class="home-content">
      <router-view></router-view>
    </div>
    <v-bottom-navigation
    fixed
    :value="tabValue"
    :color="themeColor"
    @change="bottomNavigationChange"
    grow
  >
    <v-btn value="random">
      <span>随机</span>
      <v-icon>mdi-home</v-icon>
    </v-btn>
    <v-btn value="randomList">
      <span>菜单</span>
      <v-icon>mdi-silverware</v-icon>
    </v-btn>
    <v-btn value="my">
      <span>我的</span>
      <v-icon>mdi-account</v-icon>
    </v-btn>
  </v-bottom-navigation>
  </div>
</template>
<script>
export default {
  components: {
  },
  data () {
    return {
      tabValue: this.$route.name // 底部tab值
    }
  },
  computed: {},
  methods: {
    bottomNavigationChange (name) {
      this.$router.push({ name })
    }
  }
}
</script>
<style lang="scss" scoped >
  .home{
    display: flex;
    flex-direction: column;
      padding-bottom: 56px;
      position: relative;
    .home-content {
      overflow: auto;
    }
  }
</style>
